<template>
    <el-drawer title="我是标题" :visible.sync="dialogVisible" @opened="opens" :with-header="false" class="demand_box" size='720px' @close="resetForm()">
        <div class="flexbox flexcolumn height_100">
            <div class="demand_head flexbox flexcenter flexbetween">
                <span class="demand_title">{{viewForm.name?viewForm.name:'预览策略'}}</span>
                <span class="icon_btn icon_btn_32" @click="resetForm()"><img src="@/assets/img/close_check.svg" alt=""></span>
            </div>
            <div class="demand_center flex">
                <div class="view_title">应用对象</div>
                <el-table :data="viewForm.adverData" class="com_table" max-height="320px" style="margin-top:20px">
                    <el-table-column prop="advertiser_id" label="广告账户 ID" width="200">
                    </el-table-column>
                    <el-table-column prop="advertiser_name" label="广告账户名称">
                    </el-table-column>
                </el-table>
                <div class="view_title mt_12">触发规则</div>
                <div class="flexbox flexcenter view_rules">
                    <div class="vw_left" v-if="viewForm.type==1">广告账户关停</div>
                    <div class="vw_left" v-else-if="viewForm.type==2">广告系列关停</div>
                    <div class="vw_left" v-else-if="viewForm.type==3">广告组关停</div>
                    <div class="vw_right flex">
                        <template v-for="item in viewForm.rulesDta">
                            <template v-if="viewForm.type==1">
                                <p class="text_line" :key="item"> 如果满足广告账户消耗大于<span class="blue_tips">{{item.cost}}</span>，广告账户roi小于<span class="blue_tips">{{item.roi}}</span>时，则触发广告账户<span class="blue_tips">关停</span>操作</p>
                            </template>
                            <template v-else-if="viewForm.type==2">
                                <p class="text_line" :key="item"> 如果满足广告账户下广告系列消耗大于<span class="blue_tips">{{item.cost}}</span>，广告系列roi小于<span class="blue_tips">{{item.roi}}</span>时，则触发广告系列<span class="blue_tips">关停</span>操作</p>
                            </template>
                            <template v-else-if="viewForm.type==3">
                                <p class="text_line" :key="item"> 如果满足广告账户下广告组消耗大于<span class="blue_tips">{{item.cost}}</span>，广告组roi小于<span class="blue_tips">{{item.roi}}</span>时，则触发广告组<span class="blue_tips">关停</span>操作</p>
                            </template>
                        </template>
                    </div>
                </div>
            </div>
        </div>
    </el-drawer>
</template>

<script>
export default {
    name: "",
    data() {
        return {
            dialogVisible: false,
            viewForm: {},
        };
    },
    created() {
        
    },
    methods: {
        resetForm() {
            this.dialogVisible = false;
        },
    },
    components: {},
};
</script>


<style scoped>
.view_title {
    font-size: 14px;
    color: #17233d;
    font-weight: bold;
}
.mt_12 {
    margin-top: 20px;
}
.vw_left {
    width: 100px;
    font-size: 14px;
    color: #616c85;
    flex-shrink: 0;
}
.vw_right {
    font-size: 14px;
    line-height: 20px;
}
.view_rules {
    padding: 12px;
    background-color: rgba(165, 177, 209, 0.08);
    border-radius: 4px;
    margin-top: 12px;
}
.blue_tips {
    color: #4475ff;
}
.bind_rules {
    background-color: rgba(165, 177, 209, 0.08);
    border-radius: 4px;
    margin-top: 12px;
    padding: 6px 12px;
}
.bind_item {
    padding: 10px 0;
}
.vw_trigger {
    padding-bottom: 12px;
    border-bottom: 1px solid #ebebeb;
    line-height: 20px;
    margin-bottom: 12px;
}
.vw_trigger:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
}
.text_line {
    line-height: 30px;
}
</style>

